<template>
  <div class="basic-info">
    <div class="header">
      <h2>基本信息</h2>
    </div>
    
    <el-divider />
    
    <div class="profile-top">
      <div class="avatar-section">
        <el-avatar :size="120" :src="user.avatar" />
        <div class="register-time">注册时间：{{ user.createDate}}</div>
      </div>
      
      <div class="name-section">
        <h1 class="username">{{ user.userName }}</h1>
        <el-tag :type="user.gender === 0 ? 'primary' : 'danger'" class="gender-tag">
          {{ user.gender === 0 ? '男' : '女' }}
        </el-tag>
      </div>
    </div>
    
    <div class="stats-section">
      <div class="stat-item">
        <span class="stat-value">{{ user.followerId || 0 }}</span>
        <span class="stat-label">粉丝</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">{{ user.followeeId || 0 }}</span>
        <span class="stat-label">关注</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">{{ user.newsFavorites || 0 }}</span>
        <span class="stat-label">收藏</span>
      </div>
    </div>
    
    <div class="bio-section">
      <h3>自我介绍</h3>
      <div class="bio-content">{{ user.bio || '这个人很懒，还没有写自我介绍~' }}</div>
    </div>
    
    <div class="works-section">
      <h3>个人作品</h3>
      <div class="articles-list">
        <div v-for="article in articles" :key="article.id" class="article-item"  @click="goToArticleDetail(article)" >
          <div class="article-cover">
            <el-image :src="article.cover" fit="cover" class="cover-image" />
          </div>
          <div class="article-content">
            <h4 class="article-title">{{ article.title }}</h4>
            <p class="article-summary">{{ article.summary }}</p>
            <div class="article-meta">
              <span class="article-author">作者：{{ user.userName }}</span>
              <span class="article-date">发布时间：{{ formatDate(article.createDate) }}</span>
              <span class="article-edit" v-if="article.modifyDate">最后编辑：{{ formatDate(article.modifyDate) }}</span>
              <span class="article-views">点赞数：{{ article.likeCount }}</span>
              <span class="article-views">收藏数：{{ article.favoritesCount }}</span>
              <!-- <span class="article-views">评论数：{{ }}</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()



const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})

// 作品数据
const articles = ref([])
const loadingArticles = ref(false)

// 修改跳转方法
const goToArticleDetail = (article) => {
  router.push({
    name: 'newsPersonal',
    params: { id: article.id },
    query: { authorId: props.user.id },
    likeCount: article.likeCount,  // 传递点赞数
    favoritesCount: article.favoritesCount  // 传递收藏数
  })
}

// 获取作品数据
const fetchArticles = async () => {
  if (!props.user.userName) return
  
  loadingArticles.value = true
  try {
    const response = await axios.get('/api/news/getNewsByName', {
      params: {
        authorId: props.user.id
      }
    })

    if (response.data.code === 200) {
      articles.value = response.data.data.map(item => ({
        id: item.id,
        title: item.title,
        summary: item.summary,
        cover: item.picPath || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
        createDate: item.createDate,
        modifyDate: item.modifyDate,
        categoryId: item.categoryId,
        author: item.author,
        likeCount: 0, // 初始化点赞数
        favoritesCount: 0 // 初始化收藏数
      }))
            // 为每篇文章获取点赞数
      await Promise.all(articles.value.map(async article => {
        try {
          const likeResponse = await axios.get(`/api/like/getLikeCount/${article.id}`)
          if (likeResponse.data.code === 200) {
            article.likeCount = likeResponse.data.data
          }
               // 获取收藏数
          const favoritesResponse = await axios.get(`/api/favorites/getFavoritesCount/${article.id}`)
          if (favoritesResponse.data.code === 200) {
            article.favoritesCount = favoritesResponse.data.data
          }
        } catch (error) {
          console.error('Error fetching like count:', error)
        }
      }))
      
    } else {
      ElMessage.error(response.data.message || '获取作品失败')
    }
  } catch (error) {
    ElMessage.error('获取作品失败')
    console.error('Error fetching articles:', error)
  } finally {
    loadingArticles.value = false
  }
}

// 日期格式化函数
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

// 监听用户数据变化
watch(() => props.user, (newVal) => {
  if (newVal.userName) {
    fetchArticles()
  }
}, { immediate: true })
</script>
<style scoped>
.basic-info {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.profile-top {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.register-time {
  font-size: 14px;
  color: #909399;
}

.name-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.username {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.gender-tag {
  font-size: 14px;
  height: 28px;
  line-height: 28px;
}

.stats-section {
  display: flex;
  gap: 40px;
  margin: 25px 0;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.bio-section {
  margin: 30px 0;
}

.bio-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.bio-content {
  font-size: 15px;
  line-height: 1.6;
  color: #606266;
  padding: 10px;
  border-radius: 4px;
}

.works-section {
  margin-top: 40px;
}

.works-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.article-item {
  display: flex;
  gap: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.article-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.article-cover {
  flex: 0 0 200px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.article-summary {
  flex: 1;
  margin: 0 0 10px 0;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 15px;
}

.article-author {
  color: #409EFF;
}

.empty-articles {
  color: #909399;
  text-align: center;
  padding: 40px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .profile-top {
    flex-direction: column;
    gap: 20px;
  }
  
  .name-section {
    margin-top: 0;
  }
  
  .stats-section {
    gap: 20px;
  }
  
  .article-item {
    flex-direction: column;
  }
  
  .article-cover {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;
  }
  
  .article-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}
</style>